恋恋笔记本

您所在的位置：网站首页 › element ui api文档 › 恋恋笔记本

恋恋笔记本

2023-04-09 00:54| 来源: 网络整理| 查看: 265

安装和配置使用element-ui

安装和配置

安装element-ui

npm i element-ui -S# 或者yarn add element-ui

安装插件babel-plugin-component

npm install babel-plugin-component -D# 或者yarn add babel-plugin-component -D

在babel.config.js文件中添加plungins部分

module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ]}

在入口文件main.js按需引入UI组件

import Vue from 'vue';import { Loading, MessageBox, Message, Notification } from 'element-ui';import App from './App.vue';// 注册全局组件Vue.component(Button.name, Button);Vue.component(Select.name, Select);/* 或写为 * Vue.use(Button) * Vue.use(Select) */// 将组件或方法绑定到Vue的原型上，以便全局调用Vue.prototype.$loading = Loading.service;Vue.prototype.$msgbox = MessageBox;Vue.prototype.$alert = MessageBox.alert;Vue.prototype.$confirm = MessageBox.confirm;Vue.prototype.$prompt = MessageBox.prompt;Vue.prototype.$notify = Notification;Vue.prototype.$message = Message;new Vue({ el: '#app', render: h => h(App)});

在放css文件的目录新建element-variables.scss文件，按需引入样式

/* 改变主题色变量 */$--color-primary: teal;/* 改变 icon 字体路径变量，必需 */$--font-path: '~element-ui/lib/theme-chalk/fonts';/* 按需引入样式 *//* @import "~element-ui/packages/theme-chalk/src/index"; */@import "~element-ui/packages/theme-chalk/src/button";@import "~element-ui/packages/theme-chalk/src/input";

在目录node_modules / element-ui / packages / theme-chalk / src / common / var.scss中可查看对应的scss变量名, 以便找到对应的变量名修改样式还可以局部修改组件库样式，参考之后，在项目的入口文件中引入scss文件

import './element-variables.scss'

使用命令 yarn build --report 可查看打包后文件的大小

使用element-ui onCreate() { this.$prompt('请输入笔记本标题', '新建笔记本', { confirmButtonText: '确定', cancelButtonText: '取消', inputPattern: /^.{1,30}$/, inputErrorMessage: '标题不能为空，且不超过30个字符' }).then((obj: any ) => { const {value} = obj return Notebooks.addNotebook({title: value}) }).then((res: any) => { this.$message.success(res.msg) res.data.friendlyCreatedAt = friendlyDate(res.data.createdAt) this.notebooks.unshift(res.data) }) } onEdit(notebook: Notebook) { let title = '' this.$prompt('请输入笔记本标题', '修改笔记本', { confirmButtonText: '确定', cancelButtonText: '取消', inputPattern: /^.{1,30}$/, inputErrorMessage: '标题不能为空，且不超过30个字符', inputValue: notebook.title }).then((obj: any ) => { title = obj.value return Notebooks.updateNotebook(notebook.id,{title}) }).then((res: any) => { notebook.title = title this.$message.success(res.msg) }) } onDelete(notebook: Notebook) { this.$confirm('确定要删除吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(()=>{ return Notebooks.delete(notebook.id) }).then((res:any) => { this.$message.success(res.msg); this.notebooks.splice(this.notebooks.indexOf(notebook), 1) }) }

【本文地址】

恋恋笔记本

恋恋笔记本

今日新闻

推荐新闻